<template>
  <div class="dispatch-container">
    <!-- 顶部导航 -->
    <el-menu
      mode="horizontal"
      :router="true"
      :default-active="activeMenu"
      class="dispatch-menu"
    >
      <el-menu-item index="/dispatch/plan">
        <el-icon><Calendar /></el-icon>
        调度计划
      </el-menu-item>
      <el-menu-item index="/dispatch/tracking">
        <el-icon><Location /></el-icon>
        实时跟踪
      </el-menu-item>
      <el-menu-item index="/dispatch/tasks">
        <el-icon><List /></el-icon>
        任务管理
      </el-menu-item>
      <el-menu-item index="/dispatch/exceptions">
        <el-icon><Warning /></el-icon>
        异常处理
      </el-menu-item>
      <el-menu-item index="/dispatch/statistics">
        <el-icon><DataLine /></el-icon>
        调度统计
      </el-menu-item>
    </el-menu>

    <!-- 面包屑导航 -->
    <div class="breadcrumb-container">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>调度管理</el-breadcrumb-item>
        <el-breadcrumb-item>{{ currentMenuTitle }}</el-breadcrumb-item>
      </el-breadcrumb>
    </div>

    <!-- 子路由出口 -->
    <div class="dispatch-content">
      <router-view v-slot="{ Component }">
        <transition name="fade" mode="out-in">
          <component :is="Component" />
        </transition>
      </router-view>
    </div>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'
import { useRoute } from 'vue-router'
import {
  Calendar,
  Location,
  List,
  Warning,
  DataLine
} from '@element-plus/icons-vue'

const route = useRoute()

// 当前激活的菜单项
const activeMenu = computed(() => route.path)

// 当前菜单标题
const currentMenuTitle = computed(() => {
  const menuTitles = {
    '/dispatch/plan': '调度计划',
    '/dispatch/tracking': '实时跟踪',
    '/dispatch/tasks': '任务管理',
    '/dispatch/exceptions': '异常处理',
    '/dispatch/statistics': '调度统计'
  }
  return menuTitles[route.path] || '调度管理'
})
</script>

<style scoped>
.dispatch-container {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.dispatch-menu {
  border-bottom: solid 1px var(--el-menu-border-color);
  padding: 0 20px;
}

.breadcrumb-container {
  padding: 16px 20px;
  background-color: var(--el-bg-color-page);
  border-bottom: 1px solid var(--el-border-color-light);
}

.dispatch-content {
  flex: 1;
  overflow: auto;
  background-color: var(--el-bg-color-page);
}

/* 路由切换动画 */
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.3s ease;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}

:deep(.el-menu-item) {
  display: flex;
  align-items: center;
  gap: 8px;
}

:deep(.el-menu--horizontal) {
  border-bottom: none;
}

:deep(.el-menu-item.is-active) {
  font-weight: 500;
}
</style>